<template>
	<view class="container">
		<!-- 顶部背景与内容 -->
		<view class="header">
			<image :src="$xyfun.image('/static/tennis-background.png')" class="background-image" />
			<!-- <view class="header-content">
				<text class="title">自助网球训练</text>
				<text class="subtitle">超燃体验</text>
				<text class="description">预约挑战 · 释放自我</text>
				<image :src="$xyfun.image('/static/tennis-ball.png')" class="tennis-ball" />
			</view> -->
		</view>

		<!-- 场馆信息 -->
		<view class="venue-info">
			<!-- 左侧：当前场馆和切换 -->
			<view class="venue-left">
				<!-- 当前场馆和切换按钮在一行 -->
				<view class="venue-row">
					<view class="switch-wrapper" @tap="$xyfun.to('/pages/store/select')">
						<text class="label">当前场馆：</text>
						<text class="switch-text">切换</text>
						<image :src="$xyfun.image('/static/arrow-right.png')" class="arrow-icon" />
					</view>
				</view>
				<!-- 广东乐训旗舰店单独一行 -->
				<text class="venue-name" @tap="$xyfun.to('/pages/store/select')">{{storeInfo.name}}</text>
			</view>

			<!-- 中间分隔线 -->
			<view class="divider"></view>

			<!-- 右侧：营业时间和图标 -->
			<view class="venue-right">
				<text class="business-hours">营业时间：08:00-21:00</text>
				<view class="contact-icons">
					<image :src="$xyfun.image('/static/phone.png')"></image>
					<image :src="$xyfun.image('/static/weixin.png')"></image>
					<image :src="$xyfun.image('/static/nav.png')"></image>
				</view>
			</view>
		</view>

		<!-- 功能按钮和大图 -->
		<view class="features">
			<view class="feature-item" @tap="$xyfun.to('/pages/store/venue?venue_id=1')">
				<image :src="$xyfun.image('/static/book.png')" class="feature-icon" />
				<text class="feature-text">预约</text>
				<text class="feature-pinyin">Yuè Yù</text>
			</view>

			<!-- 左侧按钮：开始 -->
			<view class="feature-item">
				<text class="feature-text">开始</text>
				<text class="feature-pinyin">Kāi Shǐ</text>
			</view>

			<!-- 中间大图 -->
			<image @tap="start" :src="$xyfun.image('/static/center-image.png')" class="center-image" />

			<!-- 右侧按钮：训练 -->
			<view class="feature-item">
				<text class="feature-text">训练</text>
				<text class="feature-pinyin">Xùn Liàn</text>
			</view>

			<view class="feature-item">
				<image :src="$xyfun.image('/static/book.png')" class="feature-icon" />
				<text class="feature-text">加盟</text>
				<text class="feature-pinyin">Jiā Méng</text>
			</view>
		</view>
		<!-- Registration Section -->
		<view class="register-section">
			<view class="left" @tap="toLogin()">
				<image :src="$xyfun.image('/static/profile_image.png')" class="profile-image"></image>
				<view class="register-info">
					<text class="main-info">登录/注册</text>
					<text class="sub-info">欢迎使用乐乐网球训练系统</text>
				</view>
			</view>
			<image :src="$xyfun.image('/static/login_button.png')" class="register-button"></image>
		</view>

		<!-- Tools Section -->
		<view class="tools-section">
			<view class="tool-item" @tap="navigateTo('免费借拍')">
				<image :src="$xyfun.image('/static/free_borrow.png')" class="tool-icon"></image>
				<view class="tool-text">
					<text class="tool-title">免费借拍</text>
					<text class="tool-subtitle">立即体验租赁服务</text>
				</view>
			</view>
			<view class="tool-item" @tap="$xyfun.to('/pages/user/order/list')">
				<image :src="$xyfun.image('/static/my_orders.png')" class="tool-icon"></image>
				<view class="tool-text">
					<text class="tool-title">我的订单</text>
					<text class="tool-subtitle">查看您的订单详情</text>
				</view>
			</view>
		</view>


		<!-- Ranking Section -->
		<view class="ranking-section">
			<view class="ranking-header">
				<view class="title-section">
					<view class="color-marker"></view>
					<text class="title">排行榜</text>
				</view>
				<view class="tab-switch">
					<button class="tab-button" :class="{active: currentTab === '全省'}" @tap="switchTab('全省')">全省</button>
					<button class="tab-button" :class="{active: currentTab === '当前门店'}"
						@tap="switchTab('当前门店')">当前门店</button>
				</view>
			</view>


			<view class="ranking-list">
				<view class="rank-item" v-for="(item, index) in rankingList" :key="index">
					<!-- Rank number: 图片替代 -->
					<view class="rank-number">
						<!-- <image v-if="index < 3" :src="getRankImage(index)" class="rank-icon"></image> -->
						<text :style="item.color" v-if="index < 3">NO.{{ item.rank }}</text>
						<text v-else>0{{ item.rank }}</text>
					</view>

					<!-- Player name with icon -->
					<view class="player-info">
						<image :src="$xyfun.image('/static/player_icon.png')" class="player-icon"></image>
						<text class="player-name">{{ item.name }}</text>
					</view>

					<!-- Player score with icon -->
					<view class="player-score-section">
						<image :src="$xyfun.image('/static/score_icon.png')" class="score-icon"></image>
						<text class="player-score">{{ item.score }}</text>
					</view>
				</view>
			</view>

		</view>

		<!-- <xy-tabbar /> -->
	</view>
</template>


<script>
	import {
		mapState
	} from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar,
		},
		data() {
			return {
				currentTab: '当前门店',
				rankingList: [{
						rank: 1,
						name: '灵魂摆渡人',
						score: 30000,
						color: 'color:#FF0000;font-weight:bold',
					},
					{
						rank: 2,
						name: '陈先生',
						score: 140,
						color: 'color:#FF6600;font-weight:bold',
					},
					{
						rank: 3,
						name: '傲文士',
						score: 120,
						color: 'color:#FFAE00;font-weight:bold',
					},
					{
						rank: 4,
						name: '爱网球',
						score: 90
					},
					{
						rank: 5,
						name: '免费借拍',
						score: 75
					},
					{
						rank: 6,
						name: '免费免费',
						score: 75
					},
				],
				css: {},
				lat: 0,
				lng: 0,
				isLoading: true,
				storeInfo: {},
				rechargeList: [],
				noticeList: [],
			};
		},
		computed: {
			...mapState(['common'])
		},
		onPullDownRefresh() {
			this.loadData();
		},
		onShareAppMessage() {
			var shareobj = {
				title: this.storeInfo.name,
				path: '/pages/index',
				imageUrl: this.storeInfo.images[0]
			}
			return shareobj;
		},
		onShow() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.$xyfun.loc().then((res) => {
				this.lat = res.latitude;
				this.lng = res.longitude;
				this.loadData();
			}, () => {
				this.loadData();
			})
		},
		methods: {
			loadData() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.get({
						url: '/common/index',
						loadingTip: '加载中...',
						data: {
							store_id: store_id,
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.$xyfun.setNavTitle(res.storeInfo.name)
							this.isLoading = false;
							this.storeInfo = res.storeInfo;
							this.storeInfo.distance = this.$xyfun.algorithm([res.storeInfo.latitude,
								res.storeInfo.longitude
							], [this.lat, this.lng]);
							this.rechargeList = res.rechargeList;
							this.noticeList = res.noticeList;
						}
					});
				})

			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/user/login'
				})
			},
			start() {
				uni.navigateTo({
					url: "/pages/start/first"
				})
			},
			getRankImage(index) {
				const rankImages = [
					'/static/rank_1.png', // 第一名图片
					'/static/rank_1.png', // 第二名图片
					'/static/rank_1.png', // 第三名图片
				];
				return rankImages[index];
			},
			navigateTo(page) {
				uni.navigateTo({
					url: `/pages/${page}/${page}`
				});
			},
			switchTab(tab) {
				this.currentTab = tab;
				// Fetch data for the selected tab
			},
		},
	};
</script>

<style lang="scss" scoped>
	/* 页面整体样式 */
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
		height: 100vh;
	}

	/* 顶部背景与文字 */
	.header {
		position: relative;
		height: 800rpx;
		background-color: #000;
		// overflow: hidden;
	}

	.background-image {
		width: 100%;
		height: 800rpx;
		object-fit: cover;
	}

	.header-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: #fff;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.subtitle {
		font-size: 28rpx;
		color: #33ff33;
		margin: 10rpx 0;
	}

	.description {
		font-size: 24rpx;
		color: #fff;
	}

	.tennis-ball {
		position: absolute;
		width: 80rpx;
		height: 80rpx;
		bottom: 0;
		right: 50rpx;
	}

	/* 场馆信息 */
	.venue-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		margin: 10px;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	/* 修改 venue-left 靠右 */
	.venue-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		/* 靠右对齐 */
	}

	.venue-row {
		display: flex;
		align-items: center;
	}

	.switch-wrapper {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.label {
		font-size: 24rpx;
		color: #666;
	}

	.switch-text {
		font-size: 30rpx;
		color: #007aff;
		// margin-right: 10rpx;
	}

	.arrow-icon {
		width: 25rpx;
		height: 25rpx;
	}

	.venue-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		// margin-top: 50rpx;
		margin-right: 50rpx;
	}

	/* 中间分隔线 */
	.divider {
		width: 2rpx;
		height: 60rpx;
		background-color: #ddd;
		margin: 0 20rpx;
	}

	/* 右侧营业时间与图标 */
	.venue-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.business-hours {
		font-size: 24rpx;
		color: #333;
	}

	.contact-icons {
		display: flex;
		margin-top: 10rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin: 2px;
		}
	}

	.icon-button {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.phone {
		background: url('/static/weixin.png') no-repeat center;
		background-size: contain;
	}

	.chat {
		background: url('/static/weixin.png') no-repeat center;
		background-size: contain;
	}

	.location {
		background: url('/static/weixin.png') no-repeat center;
		background-size: contain;
	}

	/* 功能按钮与大图 */
	.features {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 0 10px;
	}

	.feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.feature-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 5rpx;
	}

	.feature-text {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 5rpx;
	}

	.feature-pinyin {
		font-size: 20rpx;
		color: #999;
	}

	.center-image {
		width: 200rpx;
		height: 200rpx;
		margin: 0 10rpx;
	}

	/* 其他功能按钮 */
	.other-features {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.register-section {
		display: flex;
		// flex-direction: column;
		/* 垂直排列 */
		align-items: center;
		/* 水平居中 */
		justify-content: space-between;
		/* 垂直居中 */
		height: 100%;
		/* 或设置为父容器的高度 */
		padding: 40rpx;
		background-color: #fff;
		margin: 10px;
		/* 可选背景色 */
	}

	.left {
		display: flex;
	}

	.profile-image {
		width: 80rpx;
		height: 80rpx;
		// border-radius: 50%;
	}

	.register-info {
		display: flex;
		flex-direction: column;
		/* 设置垂直排列 */
		align-items: flex-start;
		/* 文字左对齐 */
		margin-left: 20rpx;
		/* 可根据需求设置左边距 */
	}

	.main-info {
		font-size: 28rpx;
		/* 主文字较大字体 */
		font-weight: bold;
		/* 加粗文字 */
		color: #000;
		/* 主文字颜色 */
		margin-bottom: 10rpx;
		/* 增加主文字与次文字的间距 */
	}

	.sub-info {
		font-size: 22rpx;
		/* 次文字较小字体 */
		color: #888;
		/* 次文字颜色 */
	}


	.register-button {
		width: 50rpx;
		/* 根据图片实际尺寸设置宽度 */
		height: 50rpx;
		/* 根据图片实际尺寸设置高度 */
		margin-left: 20rpx;
		/* 为按钮图片添加间距 */
		cursor: pointer;
		/* 鼠标悬停时显示为手型（仅H5） */
	}

	.tools-section {
		display: flex;
		justify-content: space-around;
		/* 分布放置两个工具 */
		// padding: 20rpx;
		background-color: #f5f5f5;
	}

	.tool-item {
		display: flex;
		align-items: center;
		/* 图片和文字垂直居中 */
		background-color: #ffffff;
		/* 可选背景色 */
		padding: 30rpx;
		border-radius: 10rpx;
		/* 圆角 */
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
	}

	.tool-icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		/* 图片和文字间的间距 */
	}

	.tool-text {
		display: flex;
		flex-direction: column;
		/* 文字上下排列 */
	}

	.tool-title {
		font-size: 28rpx;
		/* 标题文字大小 */
		font-weight: bold;
		/* 加粗 */
		color: #333;
	}

	.tool-subtitle {
		font-size: 22rpx;
		/* 副标题文字大小 */
		color: #888;
		margin-top: 5rpx;
		/* 标题与副标题的间距 */
	}


	.ranking-section {
		margin: 20rpx;
		background-color: #ffffff;
	}

	.ranking-header {
		display: flex;
		flex-direction: column;
		/* 让内容垂直排列 */
		padding: 20rpx;
		background-color: #ffffff;
		/* 可选背景色 */
	}

	.title-section {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		margin-bottom: 20rpx;
		/* 与 tab-switch 间距 */
	}

	.color-marker {
		width: 10rpx;
		/* 标记宽度 */
		height: 40rpx;
		/* 标记高度 */
		background-color: #00c853;
		/* 标记颜色 */
		border-radius: 5rpx;
		/* 圆角 */
		margin-right: 10rpx;
		/* 与标题文字间距 */
	}

	.title {
		font-size: 32rpx;
		/* 标题字体大小 */
		font-weight: bold;
		/* 标题加粗 */
		color: #333333;
	}

	.tab-switch {
		display: flex;
		justify-content: flex-start;
		/* 按钮靠左排列 */
		gap: 20rpx;
		/* 按钮之间的间距 */
		padding: 20rpx;
		/* 设置内边距 */
		width: 200px;
	}

	.tab-button {
		font-size: 28rpx;
		/* 按钮文字大小 */
		color: #666666;
		/* 默认字体颜色 */
		background: none;
		/* 去除背景 */
		border: none !important;
		/* 去除边框 */
		padding: 0 20rpx;
		/* 内边距控制按钮大小 */
		cursor: pointer;
	}

	.tab-button.active {
		font-weight: bold;
		/* 激活时加粗 */
		color: #333333;
		/* 激活时的文字颜色 */
		background-color: #e0e0e0;
		/* 激活时的背景色为灰色 */
		border-radius: 8rpx;
		/* 激活按钮的圆角效果 */
	}

	// uni-button:after {
	// 	border: none;
	// }


	.ranking-list {
		display: flex;
		flex-direction: column;

		/* 列表垂直排列 */
		gap: 20rpx;
		/* 每个项目之间的间距 */
		padding: 20rpx;
	}

	.rank-item {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: space-between;
		/* 左右两边对齐 */
		padding: 10rpx 20rpx;
		// background-color: #ffffff;
		/* 卡片背景色 */
		border-radius: 10rpx;
		// box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		/* 卡片阴影 */
	}

	.rank-number {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		width: 100rpx;
		/* 固定宽度 */
	}

	.rank-icon {
		width: 40rpx;
		/* 排名图片宽度 */
		height: 40rpx;
		/* 排名图片高度 */
	}

	.player-info {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		gap: 10rpx;
		/* 图片与文字间的间距 */
		flex: 1;
		/* 占据剩余宽度 */
	}

	.player-icon {
		width: 40rpx;
		/* 玩家头像宽度 */
		height: 40rpx;
		/* 玩家头像高度 */
	}

	.player-name {
		font-size: 28rpx;
		/* 玩家姓名字体大小 */
		font-weight: bold;
		color: #333;
	}

	.player-score-section {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 内容靠左对齐 */
		gap: 10rpx;
		/* 图片和文字间距 */
	}

	.score-icon {
		width: 40rpx;
		/* 图标宽度 */
		height: 40rpx;
		/* 图标高度 */
		margin-right: 10rpx;
		/* 图标与文字的额外右边距 */
		flex-shrink: 0;
		/* 防止图标缩小 */
	}

	.player-score {
		font-size: 28rpx;
		/* 分数字体大小 */
		color: #666666;
		white-space: nowrap;
		/* 防止分数换行 */
		flex-shrink: 0;
		/* 防止分数文字缩小 */
		width: 25px;
	}
</style>